<template>
    <div class="styles">
    <SettingBox title="布局">
        <SettingBoxItem label="布局模式">
            <el-radio-group size="small" v-model="styles.display">
              <el-radio-button  value="inline">
                <el-tooltip content="内联布局" placement="top" effect="light">
                    <Icon icon="material-symbols:abc" width="20" />
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="flex" >
                <el-tooltip content="弹性布局" placement="top" effect="light">
                    <Icon icon="material-symbols:view-week" width="20" />
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="block">
                <el-tooltip content="块级布局" placement="top" effect="light">
                    <Icon icon="mdi:card"  width="20" />
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="inline-block">
                <el-tooltip content="行内块布局" placement="top" effect="light">
                <Icon icon="ooui:mathematics-display-inline" width="20" />
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="none">
                <el-tooltip content="隐藏" placement="top" effect="light">
                <Icon icon="ion:eye-off" width="20" />
                </el-tooltip>
              </el-radio-button>
          </el-radio-group>
        </SettingBoxItem>
        <div class="flex">
            <SettingBoxItem label="宽">
                <InputNumber
                     controls-position="right"
                     v-model="styles.width"
                     />
            </SettingBoxItem>
            <SettingBoxItem label="高">
                <InputNumber
                     controls-position="right"
                     v-model="styles.height"
                     />
            </SettingBoxItem>
        </div>
        <div class="flex">
            <SettingBoxItem label="上内边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.paddingTop"
                     />
            </SettingBoxItem>

            <SettingBoxItem label="下内边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.paddingBottom"
                     />
            </SettingBoxItem>
        </div>
        <div class="flex">
            <SettingBoxItem label="左内边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.paddingLeft"
                     />
            </SettingBoxItem>

            <SettingBoxItem label="右内边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.paddingRight"
                     />
            </SettingBoxItem>
        </div>

        <div class="flex">
            <SettingBoxItem label="上外边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.marginTop"
                     />
            </SettingBoxItem>

            <SettingBoxItem label="下外边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.marginBottom"
                     />
            </SettingBoxItem>
        </div>
        <div class="flex">
            <SettingBoxItem label="左外边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.marginLeft"
                     />
            </SettingBoxItem>

            <SettingBoxItem label="右外边距">
                <InputNumber
                     controls-position="right"
                     v-model="styles.marginRight"
                     />
            </SettingBoxItem>
        </div>
    </SettingBox>
    <SettingBox title="文字">
        <div class="flex">
            <SettingBoxItem label="字号">
                <InputNumber
                     controls-position="right"
                     v-model="styles.fontSize"
                     />
            </SettingBoxItem>

            <SettingBoxItem label="行高">
                <InputNumber
                     controls-position="right"
                     v-model="styles.lineHeight"
                     />
            </SettingBoxItem>
        </div>
        <SettingBoxItem label="字重">
            <el-select  placeholder="请选择字重类型" v-model="styles.fontWeight">
                <el-option label="100 Thin" value="100"></el-option>
                <el-option label="200 Extra Light" value="200"></el-option>
                <el-option label="300 Light" value="300"></el-option>
                <el-option label="400 Normal" value="400"></el-option>
                <el-option label="500 Medium" value="500"></el-option>
                <el-option label="600 Semi Bold" value="600"></el-option>
                <el-option label="700 Bold" value="700"></el-option>
                <el-option label="800 Extra Bold" value="800"></el-option>
                <el-option label="900 Black" value="900"></el-option>
            </el-select>
        </SettingBoxItem>
        <SettingBoxItem label="对齐方式">
            <el-radio-group size="small" v-model="styles.textAlign">
              <el-radio-button  value="left">
                <el-tooltip content="左对齐" placement="top" effect="light">
                    <Icon icon="majesticons:text-align-left" width="20" />
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="center" >
                <el-tooltip content="居中对齐" placement="top" effect="light">
                    <Icon icon="majesticons:text-align-center" width="20"/>
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="right">
                <el-tooltip content="右对齐" placement="top" effect="light">
                    <Icon icon="majesticons:text-align-right" width="20"/>
                </el-tooltip>
              </el-radio-button>
              <el-radio-button  value="justify">
                <el-tooltip content="两端对齐" placement="top" effect="light">
                    <Icon icon="majesticons:text-align-justify" width="20"/>
                </el-tooltip>
              </el-radio-button>
          </el-radio-group>
        </SettingBoxItem>

        <SettingBoxItem label="颜色">
            <el-color-picker show-alpha :predefine="predefineColors"
             v-model="styles.color" />
        </SettingBoxItem>

        <SettingBoxItem label="透明度">
            <el-slider :min="0" :max="1" :step="0.1" />
        </SettingBoxItem>
    </SettingBox>
    </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import useEditorStore from "@/store/modules/editor";
const editorStore = useEditorStore();
const styles = computed(()=> editorStore.currentComponent!.styles);
defineOptions({
    name: "Styles"
})

const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
])
</script>
<style scoped lang="scss">
:deep() {
    .el-radio-button__inner {
        padding: 4px 0;
    }
}
.flex {
    display: flex;
}
.setting-box-item {
    flex: 1;
}
.el-input-number {
    width: 100px;
}
.styles {
    background-color: #fff;
}
</style>